<template>
    <div class="setwrap2 setwrap">
      <div class="titlecommon">
        人员信息管理
      </div>
      <div class="panelben">
        <div class="titlecommon2">
          <span>
            人员审批
          </span>
          
        </div>
        <!-- <div class="tab">
          <div @click="activeIndex=index" :class="[activeIndex==index?'tabchildActive':'','tabchild']" v-for="(item,index) in menu" :key="index">
            {{ item }}
          </div>
        </div> -->
       
       
        <div class="table">
          <el-table :data="tableData.value" style="width: 100%">
          
            <!-- <el-table-column prop="role" label="称号" /> -->
            <el-table-column prop="fullName" label="姓名" />
            <el-table-column prop="baseName" label="基地名称" />
            <!-- <el-table-column prop="man" label="所属种植户" /> -->
            <el-table-column prop="phoneNo" label="联系电话" />
            <el-table-column prop="approver" label="审核人" />
            <el-table-column prop="totalprice" label="操作" >
                <template #default="scope">
                    <div class="btnwrap">
                        <div v-if="scope.row.status==1" class="btntext btntext3">已通过</div>
                        <div v-if="scope.row.status==2" class="btntext delete btntext3">已驳回</div>
                        <div v-if="scope.row.status==0" class="btntext" @click="pass(true,scope.row.id)">通过</div>
                        <div v-if="scope.row.status==0" class="btntext delete" @click="pass(false,scope.row.id)">驳回</div>    
                    </div>  
                </template>
            </el-table-column>
           
          </el-table>
        </div>
        <div class="fy">
          <div class="total flexcenter">
            共 <span>{{ total }}</span>项数据
          </div>
          <el-pagination
          :currentPage="pageInfo.pageNum"
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="total"
        />
        </div>
        
      </div>
    <el-dialog
        v-model="dialogVisible"
        
        title="编辑账号"
        width="30%"
        custom-class="diyclass"
      >
        <div class="mcontent">
          <div class="mchild">
            <div class="label">
              账号:
            </div>
            <el-input v-model="form.account" placeholder="请输入内容" clearable />
          </div>
          <div class="mchild">
            <div class="label">
              登录密码:
            </div>
            <el-input v-model="form.pass" placeholder="请输入内容" clearable />
          </div>
          <div class="mchild">
            <div class="label">
              姓名:
            </div>
            <el-input v-model="form.name" placeholder="请输入内容" clearable />
          </div>
          <div class="mchild">
            <div class="label">
              联系电话:
            </div>
            <el-input v-model="form.tel" placeholder="请输入内容" clearable />
          </div>
          <div class="mchild">
            <div class="label">
              身份证号码:
            </div>
            <el-input v-model="form.idCard" placeholder="请输入内容" clearable />
          </div>
          <div class="mchild">
            <div class="label">
              地块位置:
            </div>
            <el-input v-model="form.location" placeholder="请输入内容" clearable />
          </div>
          <div class="mchild">
            <div class="label">
              地块面积:
            </div>
            <el-input v-model="form.area" placeholder="请输入内容" clearable />
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">保存</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              取消
            </el-button>
          </span>
        </template>
    </el-dialog>
    </div>
  </template>
  
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import { ElMessageBox } from 'element-plus'
import {post,get} from '@/public/request/api'
import { ElMessage } from 'element-plus'
export default defineComponent({
    components: {
     
    },
    setup() {
      //变量
      let pageInfo = reactive({
        pageSize: 10,
        pageNum: 1,
        total: 42,
      });
      let activeIndex=ref(0)
      const dialogVisible=ref(false)
      let total=ref(42)
      let form=reactive({
        account:'',
        pass:'',
        name:'',
        tel:'',
        idCard:'',
        location:'',
        area:'',
      })
      const menu=[
        '人员列表',
        '账号审批',
      ]
      const date=ref('')
      const value = ref('')
      const options = [
        {
          value: '1',
          label: '地块01',
        },
      ]
      let  tableData=reactive({
        value:[]
      })
     
      
      // 生命周期
      onMounted(() => {
        getList()
        //
      });
  
      onUnmounted(() => {
        //
      });
  
      //methods
      function edit(id){
        this.dialogVisible=true
      }
      function currentChange(e) {
        pageInfo.pageNum = e;
        getList()
      }
      function getList(){
        get('/needAuditList',{
          pageNum: pageInfo.pageNum,
          pageSize:10,
          
        }).then(res=>{
          tableData.value=res.pageInfo.list
          total.value=res.pageInfo.total
        })
      }
      function pass(falg,id){
        get('/accountAudit',{
          id,
          status:falg?1:2
          
        }).then(res=>{
          ElMessage({
            message: '审批完成',
            type: 'success',
          })
          getList()
        })
      } 
      function deleteOne(){
        ElMessageBox.confirm('该操作会删除账号,是否确定删除?')
        .then(() => {
          
        })
        .catch(() => {
          // catch error
        })
      }
      // return
      return {
        pass,
        currentChange,
        pageInfo,
        total,
        menu,
        activeIndex,
        tableData,
        value,
        options,
        date,
        edit,
        dialogVisible,
        form,
        deleteOne
      };
    },
  });
  </script>
  
  <style lang="scss">
  .setwrap2{
    .el-table th.el-table__cell,.el-table .el-table__cell,.el-table tr,.el-table--fit{
      background: transparent!important;
      color: #fff!important;
    }
    .el-table th.el-table__cell.is-leaf,.el-table td.el-table__cell{
      border-bottom: 1px solid rgba(255, 255, 255, 0.08)!important
    }
    .el-pagination.is-background .el-pager li{
      background: transparent!important;
      color: #fff!important;
    }
    .el-pagination.is-background .btn-next{
      background: none!important;
    }
    .btn-prev{
      background: none!important;
    }
     .el-input__wrapper{
      background: rgba(255, 255, 255, 0.08)!important;
      width: 200px;
      border-radius: 7px;
      box-shadow: none !important;
      border: none!important;
    }
    .el-input__inner{
      color: #fff
    }
  }
  </style>
  <style lang="scss" scoped>
  @import "@/assets/scss/index.scss";
  .stext{
    
  }
  .setwrap{
    .cost{
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      font-size: 20px;
      span{
        font-weight: bold;
        font-size: 25px;
        margin-left: 10px;
      }
    }
    .fy{
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .total{
        color: rgba(255, 255, 255, 0.60);
        font-size: 10px;
        span{
          font-size: 20px;
        }
      }
      
    }
    .table{
      margin-top: 20px;
    }
    .btnwrap{
      display: flex;
      align-items: center;
      .btntext{
        color:rgba(49, 127, 245, 1) ;
        cursor: pointer;
      }
      .btntext3{
        cursor: auto !important;
      }
      .delete{
        color: rgba(245, 98, 98, 1)!important;
        margin-left: 15px;
      }
    }
    .titlecommon2{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .btn2{
      width: 70px;
      box-sizing: border-box;
      padding: 5px 10px!important;
      margin-top: 20px;
    }
    .btn{
      display: flex;
      align-items: center;
      justify-content: space-between;
        background: rgba(9, 127, 229, 1);
        font-size: 14px;
        padding: 5px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    .tab{
      display: flex;
      align-items: center;
      margin-top: 20px;
      
      .tabchildActive{
        color: rgba(49, 154, 245, 1)!important;
        background: rgba(49, 154, 245, .16)!important;
      }
      .tabchild{
        cursor: pointer;
        padding: 4px 13px;
        border-radius: 100px;
        color: rgba(255, 255, 255, 0.60);
        background: rgba(255, 255, 255, 0.08);
        margin-right: 20px;
  
      }
    }
  }
  
  </style>
  